<template>
  <div class="">
    <!-- state 第一种 -->
    <div>state的数据：{{ $store.state.count }}</div>
    <!-- state 第二/三种 -->
    <div>state的数据：{{ count }}</div>
    <input type="text" v-model="num" />

    <!-- mutation第一种 -->
    <!-- <button @click ='addCount(num)'>click to add count</button> -->
    <!-- mutation第二种 组件中再定义addCount_ 同名导致栈溢出-->
    <button @click="addCount_(num)">click to add count</button>
    <!-- mutation第三种 直接调用addCount-->
    <button @click="addCount(num)">click to add count</button>

    <hr />
    <div>异步actions</div>
    <button @click="asyncAdd(num)">async add</button>
    <button @click="asyncAdd_(num)">async add</button>

    <hr>
    <div>getters</div>
    <ul>
        <li v-for="(item,index) of $store.getters.filterList" :key="index">{{item}}</li>
    </ul>
     <ul>
        <li v-for="(item,index) of filterList1" :key="index">{{item}}</li>
    </ul>

     <ul>
        <li v-for="(item,index) of filterList" :key="index">{{item}}</li>
    </ul>

    <hr>
    <router-link to="/b">childB</router-link>


  </div>
</template>

<script>
import { mapState, mapMutations, mapActions, mapGetters } from "vuex";

export default {
  name: "",
  data() {
    return {
      num: 0
    };
  },
  watch: {},
  props: {},
  components: {},
  computed: {
    //state 第二/三种
    /*  count() {
          return this.$store.state.count
      }, */
    ...mapState(["count"]),

    filterList1() {
        return this.$store.getters.filterList
    },
    ...mapGetters(['filterList'])
  },
  mounted() {},
  methods: {
    //mutations第一种
    /* addCount(num) {
          this.$store.commit('addCount',num)
      }, */

    //mutations第二种
    ...mapMutations(["addCount"]),
    addCount_(num) {
      this.addCount(num);
    },

    //actions第一种
    /*  asyncAdd(num) {
      this.$store.dispatch('asyncAdd',num)
    }, */

    //actions第二种
    ...mapActions(["asyncAdd"]),
    asyncAdd_(num) {
      this.asyncAdd(num);
    },
  },
  filters: {}
};
</script>

<style scoped lang="css"></style>
